Моя дорога в изучении HTML, PHP, CSS и MySQL

Вёрстка сайта с использованием GIMP

При создании сайта вначале нужно создать дизайн ключевых страниц сайта. Ключевая страница может быть одна, две.. Например, на этом сайте две ключевые страницы: одна та, на которой вы находитесь, другая - для электронного пособия HTML-начало. Дизайн можно разработать самому, можно заказать дизайнеру или скачать бесплатный шаблон сайта и работать с файлом формата psd. С таким форматом верстальщики работают в Photoshop, но это в Windows. А как быть в Ubuntu? Придётся работать в GIMP.

Например, обратимся к бесплатному шаблону сайта. Выбрав, нужный шаблон, при клике на нём увидим под шаблоном:

Самое главное для нас - формат psd. Ниже увидим:

Выбираем "Основное зеркало с высокой скоростью". Распаковав архив, находим файл формата psd и открываем его в GIMP. Главной задачей для меня было выбрать все изображения. Опишу, как это сделать на примере файла 167x.psd. Так выглядит этот шаблон. В файле 167x.psd 133 слоя, многовато. Но, обычно, у тех, кто занимается программированием или вёрсткой терпения достаточно.

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

сохраните исходный файл под другим именем, чтобы не испортить исходник;
удалите слои с текстом, повторяющимися элементами, фоном. Оставляйте только те, которые с нужным изображением. У меня осталось около 20 слоёв, но некоторые слои (2-3) я объединяла. Например, Layer 3 и Layer 3 copy (пингвин и его тень). Что осталось, посмотрите. Фон я оставила для наглядности.
На активном слое:
1. Ctrl+C - копируете. Ничего подгонять, выделять не нужно;
2. Shift+Ctrl+V (Файл - Создать - Из буфера обмена)
3. Ctrl+S - Сохранить в формате png, качество лучше. Но изображения больших размеров нужно сохранять в формате jpg, чтобы размер файла был меньше.

Вот некоторые изображения, взятые из шаблона таким образом в GIMP:

Продолжение