GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор

   


Делаем простой сайт средствами GIMP

Главная Уроки Делаем простой сайт средствами GIMP

Редко появляется какой не будь Web-дизайн сделанный при помощи GIMP, давайте же исправим эту ситуации, и покажем что и GIMP очень удобное средство для Web-дизайнера.

Данный дизайн, предоставлен для демонстрации, и может не соответствовать всем стандартам.

Создаем новое изображение (Файл -> Создать) и выбираем размеры 1400×1200.

Создаем направляющие, для этого курсором мыши наводим на линейку, и зажимаем мыши и перетаскиваем направляющую в нужное нам положение.

Делаем заливку фона, нам понадобится Линейный Градиент[L], цвета стандартные.

Делаем шапку, Прямоугольное выделение[R], заливка 2b2b2b.

На верхнем блоке делаем Линейный Градиент[L] цвета 2b2b2b-797979.

Делаем меню, Инструмент Текст[T] параметры Verdana 24.

Инструменты Прямоугольное выделение [R] выделяем пункт «Главная» и заливаем Линейным градиентом[L]. Цвета 00c100 + 005f00.

Делаем тень для кнопки, выделим Прямоугольник, и зальем его черным, после сделаем размытие по Гауссу на 5–10 (Фильтры -> Размывание -> Гаусса Размытие).

Инструмент Прямоугольное выделение[R] с разкругление 20, выделяем правый край меню, и заливаем градиентом тем сам что и меню.

Прямоугольно выделение[R], с теме же параметрами, делаем кнопку в правой области меню, заливаем 003400, полсе выделенную область уменьшаем на 1px, и заливаем Линейным градиентом[L], кнопки, градиент тот же что для главной кнопки.

Добавляем еще несколько направляющих:

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

Пишем название сайта. Шрифт: Papyrus, цвет: 32dc32, размер: 70.

Далее, делаем разделение на под меню и контент, делаем шапки для каждого из блока, и заливаем Линейным градиентом[L] тем же что и меню.

Контент заливаем белым цветом, а под меню зеленым.

С права градиентом белый + прозрачный осветлим с верху.

Теперь шапку для меню, немного украсим, при помощи инструмента Прямоугольное выделение[R] и Контура [B]. Делаем следующие действия:

Финал, наполняем дизайн информацией:


4

В избранном у 4 человек:

Метки: , , , , , , , , .

Результаты урока

Добавить

Уроки: предыдущий следующий

26 комментариев

7

Пользователь #10429Алекса Веселова20 февраля 2013 в 01:40Личное сообщение

Типа хорошо, но как потом это одевать на сайт (чтоб все нажималось, кликалось)?

1

Пользователь #2728Ирина Тараник20 февраля 2013 в 03:05Личное сообщение

Простейший способ - указывать область на изображении, делая эту область ссылкой. Средствами HTML делается за пару минут.
Но это уже совсем другая сказка, к гимпу не относящаяся.

1

Пользователь #9869Валентин Борисенко20 февраля 2013 в 04:54Личное сообщение

Раз сайт о природе, то наличие зеленого понятно, но не понятно, зачем так много темного?
Если бы не слово NATURE в заголовке, я бы решил, что это сайт завода химконцентратов или группы Prodigy.
Вот как выглядит сайт о природе: http://www.wwf.ru/

Ирина, вы имеете в виду карту изображения? зря. Это глупо.
Тут почти все делается средствами CSS.

0

Пользователь #10035Oleg Kryvokulskyy20 февраля 2013 в 06:36Личное сообщение

Макет сайта получился симпатичным, в стиле WEB 2.0.
Но я согласен с Валентином Борисенко к тому же такая технология не соответствует стандартам W3C (что скажется на отношении к сайту со стороны поисковых систем) и не будет правильно отображаться на портативных устройствах. Но это тема обсуждения на иных сайтах.

0

Пользователь #4Андрей Сидоров20 февраля 2013 в 07:34Личное сообщение

Валентин, написано же "самый простой способ". Более сложные где-то тут: http://htmlbook.ru/

-3

Пользователь #9869Валентин Борисенко20 февраля 2013 в 12:43Личное сообщение

Тю, на htmlbook не много интересного) там только основы. Азы, так сказать.
Но иногда выручает как шпаргалочка)

-4

Пользователь #2728Ирина Тараник20 февраля 2013 в 13:29Личное сообщение

Я посчитала, что это - сайт по графике, а не по веб-программированию и описывать тут подробно такие вещи не нужно. К тому же, я полагаю, что если человек задаёт такой вопрос, то он не знает ничего вообще, а начинать лучше с самых азов уровня 10-11 класса, а не с CSS.
Уж извините, если не права.
Ну и пардон за такой оффтоп.

-4

Пользователь #9869Валентин Борисенко20 февраля 2013 в 13:39Личное сообщение

где вы видели азы в 10-11 классах?))

0

Пользователь #8495Николай Ушмотьев20 февраля 2013 в 14:28Личное сообщение

Этот урок всего лишь пример того, что можно заниматься веб дизайном и на бесплатном ПО! Так что придираться к идеи дизайна?

2

Пользователь #2728Ирина Тараник20 февраля 2013 в 14:37Личное сообщение

Валентин, где вы видели изучение CSS в школе?

0

Пользователь #10429Алекса Веселова20 февраля 2013 в 15:13Личное сообщение

Если бы здесь было больше цветов, то это называется ,,синдром радуги".

-4

Пользователь #9869Валентин Борисенко20 февраля 2013 в 16:19Личное сообщение

Мы в 9-ом классе изучали основы HTML и CSS)

1

Пользователь #7784Константин Карнаухов20 февраля 2013 в 20:39Личное сообщение

По уроку:

Градиент на фоне лучше бы смотрелся в вариантах из темно-зеленого в светло-зеленый.

Под навигацией в зоне под фотографии черный цвет лучше убрать. А надписи к картинкам сделать везде белым цветом и под них засунуть слой с черным цветом и непрозрачностью в 50%.

По дискуссии:

Валентин, везет, что в 9-ом классе изучали сайтостроение. В моей школе стали давать основы HTML в 8-ых классах, когда я в 9-ом был. Пришлось самому учиться за лето.

Ирина, тот же вопрос: где Вы видели, чтобы в 10-11 классах давали основы хотя бы HTML? Если бы такое было бы я был бы только счастлив. Можно было бы поспать на информатике, хотя че я там еще то делаю :-)

Ну пока все же для верстки удобней пользоваться фотошопом. Эх вот бы в гимп внедрили стили слоев фотошопские, а не плагином

-3

Пользователь #9869Валентин Борисенко20 февраля 2013 в 20:58Личное сообщение

Стили слоев не так важно для этого. Важнее гильотина, которая режет все без разбора...

0

Пользователь #2728Ирина Тараник20 февраля 2013 в 23:08Личное сообщение

>Ирина, тот же вопрос: где Вы видели, чтобы в 10-11 классах давали основы хотя бы HTML?

В мечтах.. Не говоря уж о чём-то посерьёзнее. Впрочем, меня из школы выгнали до этого, впрочем, когда работала в школе, ситуация была не лучше.
А на информатике лично меня учили пользоваться текстовыми редакторами типа "Word" и делить на 2, 8 и 16.

1

Пользователь #9224Игорь Лев20 февраля 2013 в 23:45Личное сообщение

"Редко появляется какой не будь Web-дизайн сделанный при помощи GIMP" - почему же? Как Вы определяете дизайн сделанный при помощи GIMP или иными средствами?

В Вашем уроке Вы не сделали сайт. Это макет, который еще нужно сделать сайтом.

0

Пользователь #10095Анастасия Высочина21 февраля 2013 в 15:05Личное сообщение

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

0

Пользователь #1384TechnoVirus21 февраля 2013 в 18:08Личное сообщение

Осталось найти программу, которая бы могла переводить эти макеты в хтмл, css и прочее. :)
А так, не вижу смысла в таком уроке.

0

Пользователь #9869Валентин Борисенко21 февраля 2013 в 18:44Личное сообщение

Программа называется "блокнот" ;)

Ну, если уж так лень, то можете использовать Dreamweaver.
Но лично мне приятней самому все делать)

0

Пользователь #4Андрей Сидоров21 февраля 2013 в 19:11Личное сообщение

TechnoVirus, в текущем гимпе инструмент называется "Гильотина". Идея создания нового инструмента, который бы разрезал макеты лежит в GSoC этого года.

1

Пользователь #1Филипп Ткачёв2 марта 2013 в 22:22Личное сообщение

В основе любого грамотного дизайна лежит баланс между между формой и содержанием.
Дизайн способствует постановке акцента на содержание.
Обратите внимание, что в данном примере содержание загнано практически в подвал.
Шапка перегружена невнятным нечитаемым заголовком [логотипом?]. Слоган не согласован с заголовком.
Зеленая колонка справа и белый прямоугольник в ней вносят дизбаланс и вырвиглазие.
Попытка создания плоского элемента в объемном заголовке правой колонки выглядит вычурно и безосновательно.
Но в этой попытке есть и удачные элементы, а именно меню с переключением языка. Кнопки утоплены в нишу и смотрятся в ней достаточно органично. Но и в этом месте автора подводит неопытность. О выбранном языке мы можем судить лишь по тексту страницы. На самом деле, в данном случае кнопка переключения должна содержать текст "In English", дабы носитель незнающий русского языка смог сориентироваться на вашем сайте.
Как говорится, первый блин - комом. Не отчаивайтесь, на пути к совершенству будет еще много преград, но, преодолев их, вы сможете по достоинству оценить результаты своей деятельности.

0

Пользователь #11059Алексей Имша5 марта 2013 в 11:36Личное сообщение

А объясните на пальцах, как потом в gimp этот дизайн нарезать.
И сохранить элементы графики для web.

В PS есть удобный инструмент - выделил область, назвал ее, и сохранил именно выделенный кусок "картинки".
Потратил пол дня, не могу подобного найти в gimp'e

Чую, что придется ставить фотошоп.

2

Пользователь #11205Анастасия Вольная27 марта 2013 в 16:55Личное сообщение

Как никрути, очень полезный урок) У меня даже получилось это сделать, хотя знания у меня нулевые, я даже незнала как работать с направляющими) Кое что не получилось, некоторые моменты непонятны, но сама картина в общем образовалась) Очень понравилось) Полезная штука) Буду тренироваться дальше) Спасибо за урок!!!

0

Пользователь #11453Павел Сахнов6 мая 2013 в 01:34Личное сообщение

у меня такой вопрос пор уроку: а слои не делаются здесь? В частности не понятен момент с созданием тени под кнопкой "главная" Там нее ясен момент как сначала выделение заливается градиентом, потом черным, а потом почему-то снова становится градиентом, после размытия? Что за волшебство?

0

Пользователь #4Андрей Сидоров8 мая 2013 в 15:51Личное сообщение

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

Чтобы участвовать в обсуждении вы должны войти или зарегистрироваться.

  • >

Информация по уроку

Другие уроки автора

Рисуем обои на рабочий стол в стиле минимализм "Sun Smile"
Мне всегда нравился стиль минимализм, своим простым и нежным фоном и насыщенным маленьким или большим сюжетом.

Создание рождественской конфетки (иконка)
Рисуем рождественскую иконку в Гимпе при помощи инструмента "Контуры".

Создание великолепной открытки на Новый Год
Новый Год, прекрасное событие, с чем всех и поздравляю, и для вас этот потрясающий урок, и поздравление на нем.

Создаем красочный фон с конфетти
В этом уроке, Я покажу как создавать динамические кисти GIH, и еще об дополнительной возможности инструмента "Кисть".

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

Кисти

Web 2 Badge (128x128) doodles2_brushes_by_hawksmont7 Фламинго NSS-V2.0-brush-an-9 GIMP Brush GIMP Brush Пестрая клякса Цветные прямоугольники GIMP Brush Zvezda привет! slender
Воспользуйтесь нашим сортировщиком кистей для подбора нужной кисти.

Оценка урока

«Делаем простой сайт средствами GIMP» получил оценку 4.00 на основе 4 голосов.

13876+0
Комментариев

вверх