http://slotmagnet2017.ru/igrovye-avtomaty-888igrat-na-realnye-dengi-onlajn-s-bonusom.html

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

   


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

Главная Уроки Как сделать дизайн сайта в GIMP

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

В своей работе довольно таки продолжительное время я использовал исключительно проприетарный софт, а именно Adobe Photoshop. Довольно таки продолжительное время - это около 8 лет (на 2014 год).

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

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

И вот теперь я, набравшись опыта, знаний в разработке дизайна и юзабилити сайтов - готов дать ответ системе. К тому же, полный цикл разработки осуществляю в одном лице и зависимости от исходников PSD, нарисованных или не дорисованных (как это часто бывает), уже нет.

Редактор - это всего-лишь инструмент. Знаменитый художник, который рисует в Paint ярко символизирует. Но, к счастью, разработчики подарили нам более подходящий для веб-дизайна инструмент - GIMP.

Какой софт я использовал в своей работе для этого урока:
- Ubuntu 14.04
- Gimp 2.8.10
- Gcolor
- Система сеток 960gs

Файлы урока, которые нам понадобятся, можно скачать с Яндекс.Диска: http://yadi.sk/d/edsbxnAeQmuyK.

В архиве вы найдете изображения для создания дизайна сайта, файл 960_grid_12_col.xcf - разлинованный в системе сеток 960gs макет для GIMP, необходимые шрифты, а также готовый, нарисованный мной макет сайта.

Внимание! Каждый элемент рисуем на новом слое.

Итак, приступим.

Шапка сайта
1. Откроем в GIMP систему сеток 960gs (файл 960_grid_12_col.xcf), создадим новый слой, нарисуем на нем в верхней части прямоугольник во всю ширину макета, высотой 140 пикселов. Зальем его градиентом - #111111 нижний цвет и #555555 верхний цвет.

2. Вытянем из верхней линейки горизонтальную направляющую и установи на отметке 60. Вставим логотип (файл logo.png) на новый слой таким образом, чтобы он прижимался к созданной направляющей и левой крайней направляющей системы сеток.

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

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

Необходимо установить плагин Script-Fu Layer Effects, который есть в архиве - файл Layerfx.scm

Создастся новый слой с тенью, который будет располагаться выше прямоугольника поиска. Не снимая выделения с нового слоя с тенью, выполним команду "Выделение > Уменьшить" и уменьшим выделение на 1 пиксель. После этого выполним команду "Выделение > Инвертировать". Зальем 1-пиксельный край поля поиска заливкой цвета #626467:

Напишем в поле поиска "Искать по сайту..." шрифтом "Arial" (для Ubuntu шрифты MS можно установить командой sudo apt-get install msttcorefonts). Размер текста 12px, начертание курсивом, цвет #858787.

Теперь вставим иконку поиска (файл search.png), зальем ее цветом рамки #626467 и уменьшим так, чтобы она хорошо и гармонично смотрелась:

4. Левее поля поиска, между 4 и 8 колонками, напишем пункты главного меню. Шрифт PT Sans Narrow Condensed (из архива) размер 16, цвет #a6a6a6. Цвет первого пункта сделаем #e3e3e3 и подчеркнем. Друг от друга отобъем пункты меню пробелами.

5. Создадим 2 прямоугольника на одном слое шириной в рабочую область сетки, высотой 1 пиксель и расположим их друг под другом, примерно посередине шапки. Зальем верхний цветом #252728, а нижний #4a4b4b. После этого сотрем их края мягкой резинкой большого размера:

6. Над слоем полосы меню, которую рисовали в начале урока, создадим новый слой и нарисуем на нем овал, высотой в половину шапки и шириной во всю рабочую область сетки. Спрячем половину овала за верхней границей документа. Зальем его цветом #6E9FAE:

Теперь снимем выделение и размоем овал гауссовым размыванием (Фильтры > Размывание > Гауссово размывание).

Применим шум и Установим непрозрачность слоя 30%.

7. Ниже, между двухцветной линией, которую рисовали ранее, и нижней границей шапки, напишем подпункты, тем же шрифтом, что и пункты главного меню. Размер шрифта 14 пикселей. Цвет сделаем #6d7070, а первый пункт меню выделим цветом #d7d7d7.

Под слоем текста создадим новый и нарисуем прямоугольник со скругленными углами (радиус закругления 3 пиксела), зальем белым цветом и применим к нему фильтр Inner Shadow, который применяли ранее (Script-Fu > Layer Effects > Inner Shadow), со следующими параметрами:


Удалим белый фон, для которого применяли внутреннюю тень. После снятия выделения, получим следующий результат:

8. Последний штрих в нашей шапке - легкий глянец верхней половины. Создадим слой над первым слоем, который делали и нарисуем прямоугольник во всю ширину документа, высотой - до разделительной полоски. Зальем его белым цветом и установим непрозрачность слоя 20%.

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

Выше темного слоя, который у нас получился, разместим текстуру фона (под кожу), а именно файл skin.jpg.

Уменьшим нашу текстуру до ширины 1390 пикселей, с помощью инструмента "Масштаб" и разместим в центре макета.

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

Получившуюся текстуру подбейте четко под шапку и инструментом "Ластик" с мягкой кистью сотрите немного спара, слева и снизу при достаточно большом диаметре кисти:

Сделаем непрозрачность "кожи" 70%.

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

10. Вставим на новый слой картинку hall.jpg, обрежем снизу (выделением и удалением слишком длинного пола зала) и уменьшим до ширины рабочей области сетки (940 пикселей), сохраняя пропорции. Вставим также под шапку, в центре макета:

Применим к изображению фильтр Inner Shadow, со следующими параметрами (может долго отрабатывать):

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

Можно создать декоративную полоску внизу шапки высотой в один пиксель, во всю ширину документа и залить ее цветом #1d1e1e:

11. Теперь добавим заголовок баннера (цвет белый, шрифт PT Sans Narrow Condensed, 26 пикселов) и сделаем под ним выделение прямоугольником со скругленными углами (радиус закргления 8 пикселов), который зальем черным цветом и сделаем непрозрачность 45%. У текста сделаем тень (Фильтры > Свет и тень > Drop Shadow).

12. Нарисуем внизу картинки прямоугольник без закругленных углов, высотой 85 пикселлов, также зальем его черным цветом и сделаем непрозрачность 70%. На нем напишем текст в пределах первых 7-ми колонок сетки. Остальное место оставим под картинку:

13. Вставим картинку kolonki-1.png в последние 5 колонок сетки, как показано на картинке:

Внизу колонок можно удалить белесые элементы и немного затемнить нижнюю часть инструментом "Кисть" черным цветом с непрозрачностью 30%.

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

15. Добавим прямоугольник высотой 4 пиксела и шириной в рабочую область сетки, поместим над созданным в предыдущем пункте оверлеем. Закрасим новый прямоугольник цветом #13191d. Внимание! Прямоугольник не должен выступать над колонками (аудиооборудование).

16. Справа и слева добавим 1 пиксельные полоски в ширину и высотой - от фотографии зала, до самого низа, чтобы обозначить центральную часть контента сайта (цвет - #12181c):

Подвал (footer) сайта
Заключительная часть урока по созданию дизайна сайта в GIMP, в которой создадим элементы подвала сайта.
17. Создадим группу слоев, в которой разместим прямоугольник (на новом слое) шириной 270 и высотой 140 пикселов, с закругленными углами (радиус закругления 4 пиксела). Зальем прямоугольник градиентом от цвета #0D0D0D снизу и до цвета #3A3A3A сверху.

Уменьшим выделение на 1 пиксель, инвертируем и зальем границу цветом #676765 (см. 3 пункт). На этот раз заливаем только верхнюю часть границы, нижняя останется без заливки.

18. Создадим новый слой и добавим картинку kolonki-2.png, уменьшив до необходимых размеров.

19. Добавим заголовок нашему баннеру, установив цвет первого слова - #c1c1c1, а цвет модели - #ffffff. Шрифт заголовка - PT Sans Narrow Condensed. Размер первого слова - 20 пикселов, размер названия модели - 26 пикселов.

Добавим заголовку тень, как в 11 пункте.

20. У любого объекта в дизайне, если это какая-то модель или какой-то визуальный объект, должна быть тень. Так что добавим новый слой и поместим его под слой с колонкой. И инструментом "Кисть" аккуратно нарисуем тень под колонкой черного цвета, непрозрачностью 25%. Тут главное - не переусердствовать.

21. Напишем описание баннера и скопируем группу слоев с баннером 3 раза, разместив их на равном расстоянии друг от друга. Цвет шрифта описания - #a0a0a0, семейство шрифтов - Arial, а размер - 13 пикселей.

После дублирования группы слоев с баннером, у нас получится следующая картина:

Обратите внимание, 2 последних баннера я намеренно затемнил для того, чтобы показать, что выбран первый вариант на картинке как текущий. Добиться этого можно, установив непрозрачность для слоя фона, либо для группы слоев целиком.
Полноэкранный результат выполнения данного урока вы можете посмотреть здесь: http://rtfm.org.ru/24/

Несколько слов напоследок
- Главное - детали. Уделяйте в своих дизайнах достаточно внимания деталям макета.
- Не важно, в каком инструменте вы работаете, дизайн - это то, что у вас в голове, а не то, что заложено в какой-то определенной программе.
- Главное - детали...

Результат выполнения урока:

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


6

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

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

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

Добавить

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

3 комментария

2

Пользователь #10095Анастасия Высочина16 июля 2014 в 09:18Личное сообщение

Хороший урок, продуманный. Редко встретишь на этом сайте хорошие уроки по созданию сайтов.

0

Пользователь #12588Эммануил Андреев19 июля 2014 в 09:23Личное сообщение

Интересный и качественный урок. Ваше внимание к деталям мне очень нравится (сам как правило что-нибудь забываю).
Единственное, что меня смущает в данном уроке, так это то, что я не могу понять зачем он. Мне не понятно зачем создавать картинку дизайна сайта. Я немного знаком с процессом создания сайта и его дизайна и не могу представить как может помочь сделанная таким образом картинка в дальнейшем при создании сайта. Если не трудно объясните мне.
Заранее спасибо)

1

Пользователь #13575Валентин Никонов21 июля 2014 в 14:07Личное сообщение

Эммануил Андреев, общепринятая практика - это когда дизайнер создает картинку (шаблон) сайта в графическом редакторе. Данный шаблон утверждается заказчиком сайта, после этого верстальщиком создаётся вёрстка сайт в html/css, после этого пишется функционал сайта программистом (на PHP или ASP, или на других языке программирования).

Дизаин сайта в графическом редакторе создается для того, чтобы видеть, как в конечном итоге должен выглядеть сайт.

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

  • >

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

Кисти

Web 2 Badge (128x128) GIMP Brush slender
Воспользуйтесь нашим сортировщиком кистей для подбора нужной кисти.

Оценка урока

«Как сделать дизайн сайта в GIMP» получил оценку 5.00 на основе 1 голосов.

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

вверх