Вёрстка сайта при помощи Gimp.

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

Gimp можно установить на любую операционную систему, и он не жрёт столько ресурсов, сколько кушает Photoshop.

Photoshop для использования в 99% случаев пиратят, и если вы работаете в белую, то поиск аналога очевиден и это Gimp, который бесплатен и его можно установить как на Windows и MacOS так и на Linux.

Перво наперво после установки Gimp, нужно перейти в привычный одно-оконный режим.

Для этого лезим в меню Окна (Windows) и кликаем по выбору одно-оконный режим (Single Window).

Теперь всё выглядит как в Photoshop.

Открываем файл для вёрстки в PSD формате, Gimp с этим уже справляется без проблем.

После открытия мы видим, что есть возможность работать со слоями как и в Photoshop, но можно упростить нашу вёрстку определёнными настройками, а именно - идём в правку (Edit), параметры (Preferences), параметры инструментов (Tool Options), и в самом низу отмечаем галочкой - делать слой или контур активным (Set Layer or Path as Active).

Теперь возвращаемся к нашему макету и нажимаем горячую клавишу M (move tool). Оно же перемещение или на панели инструментов крестик со стрелочками в разные стороны.

Как только мы кликнем по какому-то элементу нашего шаблона PSD файла, как слой на панели слоёв станет активным и нам уже проще будет с ним работать.

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

После проделанных операций всё ещё проще, идём в меню и выбираем "изображение" (Image), и кликаем "автокадрировать изображение" (Autocrop Image).

Дальше нам нужно сохранить наше творчество для последующего использования в вёрстке.

Для этого опять возвращаемся в меню, кликаем по файл (File), экспортировать как (Export As).

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

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

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

Если "глазки" на слоях всё ещё закрыты, то кликаем по слою с открытым глахком удерживая клавишу Shift.

И вот мы снова можем выбирать следующую картинку для сохранения в нужном нам формате, для дальнейшей вёрстки.